<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>主页</title>
</head>
<script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/jquery-3.5.1.js"></script>
<body>
	<div><h1>欢迎${username }</h1><button type="button" id="logOut">注销</button><a href="${pageContext.request.contextPath }">index</a></div>
	<!-- <div>
		<input type="button" id="insertTwoRoleBtn" value="点击插入11个角色">
	</div> -->
	<div>
		<input type="text" placeholder="请输入查询条件" id="pageText"><input type="button" id="selectBtn" value="查询">
	</div>
	<div>
		<button type="button" onclick="deleteBatch()">批量删除</button>
	</div><hr>
	<div>
		<form action="${pageContext.request.contextPath}/mail" enctype="multipart/form-data" method="post">
			<input type="text" placeholder="请输入收件人邮箱" name="to" id="to" value="286221628@qq.com"><span style="color: fuchsia;"></span><br>
			<input type="text" placeholder="请输入邮件主题" name="subject" id="subject" value="${subjectValue }"><span style="color: fuchsia;"></span><br>
			<input type="text" placeholder="请输入邮件文本内容" name="text" id="text" value="${textValue }"><span style="color: fuchsia;"></span><br>
			<input type="file" name="file" id="file"><span style="color: lime;">${pic }</span><br>
			<input type="submit" value="邮件发送">
		</form>
		<%-- <form action="${pageContext.request.contextPath}/upload" enctype="multipart/form-data" method="post">
			<input type="file" name="file"><span style="color: aqua;">${file }</span>
			<input type="submit" value="upload">
		</form> --%>
	</div><hr>
	<a href="${pageContext.request.contextPath }/download">点击下载</a>
	<div>
		<table id="tab1" border="1"></table>
	</div>
	<div id="div1"></div>
	<div id="div2"></div>
</body>
<script type="text/javascript">
	$(function(){
		start(1);
	});
	var jsonObj={"pageNum":1};
	function start(start){
		jsonObj.pageNum=start;
		$.ajax({
			type:"post",
			data:jsonObj,
			url:"${pageContext.request.contextPath}/role/selectAll",
			success:function(result){
				var object="<tr><th><input type='checkbox' id='allCheckbox' onclick='allCheck()'>"
					+"</th><th>id</th><th>role</th><th>description</th><th>parent_id</th><th>locked</th><th>修改||删除</th></tr>";
				$.each(result.list,function(i,n){
					object+="<tr><td><input type='checkbox' id='"+n.id+"' name='"+n.role+"'></td><td>"
						+n.id+"</td><td>"+n.role+"</td><td>"+n.description+"</td><td>"+n.parentId+"</td><td>"+n.locked
						+"</td><td><a href='${pageContext.request.contextPath}/role/toUpdate?id="
						+n.id+"'>修改</a>||<a href='#' onclick='deleteOne("+n.id+")'>删除</td></tr>";
				});	
				$("#tab1").html(object);
				
				var object1="当前第"+result.pageNum+"页，总共"+result.pages+"页，总共"+result.total+"条记录";
				$("#div2").html(object1);
				//为了删除数据回到原来页面，而不是回到首页
				$("#div2").prop("is",result.pageNum);
				$("#div2").prop("nonce",result.size);
				
				
				var object2="";
				if(result.isFirstPage){
					object2+="<a>首页</a>";
				}else{
					object2+="<a href='#' onclick='pageChange(1)'>首页</a>";
				}
				if(result.hasPreviousPage){
					object2+="<a href='#' onclick='pageChange("+(result.pageNum-1)+")'>&laquo;</a>";
				}
				$.each(result.navigatepageNums,function(i,n){
					if(n==result.pageNum){
						object2+="<a>"+n+"</a>";
					}else{
						object2+="<a href='#' onclick='pageChange("+n+")'>"+n+"</a>";
					}
				});	
				if(result.hasNextPage){
					object2+="<a href='#' onclick='pageChange("+(result.pageNum+1)+")'>&raquo;</a>";
				}
				if(result.isLastPage){
					object2+="<a>末页</a>";
				}else{
					object2+="<a href='#' onclick='pageChange("+result.pages+")'>末页</a>";
				}
				$("#div1").html(object2);
			}
		});
	}
	
	function pageChange(currentPage){
		start(currentPage);
	}

	$("#selectBtn").click(function(){
		jsonObj.pageText=$("#pageText").val();
		start(1);
	});

	/* $("#allCheckbox").click(function(){
		alert("asdf");
		$("table tr td input[type='checkbox']").prop("checked",$("#allCheckbox")[0].checked);
	}); */
	function allCheck(){//注意！！！动态的不能用click事件，还有用到了dom的方法需要把jQuery对象转换成dom对象
		$("table tr td input[type='checkbox']").prop("checked",$("#allCheckbox")[0].checked);
	}

	function deleteOne(suibian){
		$.ajax({
			type:"post",
			url:"${pageContext.request.contextPath}/role/deleteBatch",
			data:{
				["allList[0].id"]:suibian
			},
			success:function(result){
				if(result>0){
					if($("#div2")[0].nonce==result){//当前页数量等于删除的记录数
						start($("#div2")[0].is-1);
					}else{
						start($("#div2")[0].is);
					}
				}
				if(result==-1){
					alert("用户已取消删除");
				}
			}
		});
	}

	function deleteBatch(){
		var all=$("table tr td input:checked");
		if(all.length==0){
			alert("没有要删除的对象，请重新选择");
			return false;
		}
		var jsonObj2={};
		$.each(all,function(i,n){
			jsonObj2["allList["+i+"].id"]=n.id;
			jsonObj2["allList["+i+"].role"]=n.name;
			
		});
		$.ajax({
			type:"post",
			url:"${pageContext.request.contextPath}/role/deleteBatch",
			data:jsonObj2,
			success:function(result){
				if(result>0){
					alert("删除"+result+"条记录成功");
					if($("#div2")[0].nonce==result){//当前页数量等于删除的记录数
						start($("#div2")[0].is-1);
					}else{
						start($("#div2")[0].is);
					}
				}
				if(result==-1){
					alert("用户已取消删除");
				}
			}
		});
	}

	$("form:first").submit(function(){
		//中文、英文、数字包括下划线,长度3-20：^[\u4E00-\u9FA5A-Za-z0-9_]{3,20}$
		var pattern=/^[\u4E00-\u9FA5A-Za-z0-9_]{3,20}$/;

		var to=$("#to").val();var subject=$("#subject").val();var text=$("#text").val();var fileName=$("#file").val();
		if(to==="286221628@qq.com"){$("span:eq(0)").html("");}else{
			$("span:eq(0)").html("只能输入猩总的qq邮箱");
			return false;
		}
		if(pattern.test(subject)==false){
			$("span:eq(1)").html("主题只能输入中文、英文、数字包括下划线,长度3-20");
			return false;
		}
		if(pattern.test(text)==false){
			$("span:eq(2)").html("文本只能输入中文、英文、数字包括下划线,长度3-20");
			return false;
		}
		var suffix=fileName.split(".")[1];
		alert(fileName=="");
		if(suffix=="JPG"||suffix=="JPEG"||suffix=="BMP"||suffix=="GIF"||fileName==""){
			return true;
		}
		$("span:eq(3)").html("上传的图片格式错误");
		return false;
	});
	
	/* $("#insertTwoRoleBtn").click(function(){
		window.location.href="${pageContext.request.contextPath}/role/insertTwo";
	}); */

	$("#logOut").click(function(){
		window.location.href="${pageContext.request.contextPath}/logout";
	});
</script>
</html>